<template>
  <canvas id="myChartContainer" width="800" height="600"></canvas>
</template>

<script setup>
import { onMounted } from "vue";
import MyChart from "@/utils/myChart";
onMounted(() => {
  const chart = new MyChart({
    container: document.getElementById("myChartContainer"),
    width: 800,
    height: 600,
    padding: [40, 40, 40, 100],
  });

  console.log(chart);
  chart.render({
    type: "bar",
    style: {
      // 图表相关样式，同canvas样式调节
      fillStyle: "red",
    },
    coord: {
      xAxis: {}, // x轴相关配置
      yAxis: {}, // y轴相关配置
    },
    data: [
      {
        time: "08-01",
        value: 1000,
      },
      {
        time: "08-02",
        value: 2000,
      },
      {
        time: "08-03",
        value: 1020,
      },
      {
        time: "08-04",
        value: 1080,
      },
      {
        time: "08-05",
        value: 1300,
      },
      {
        time: "08-06",
        value: 1090,
      },
    ], // 数据
  });

});
</script>

<style lang="less" scoped></style>
